<template>
    <div class="clientpond">
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="微提醒" title="日日保"></crumbs>
        </div>
        <div class="paddingbox">
            <div class="innertabbox">
                <div :class="{ innertabitem: true, innertabactive: innertabflag === 0 }" @click="changeinnertab(0)">已投保客户
                </div>
                <div :class="{ innertabitem: true, innertabactive: innertabflag === 1 }" @click="changeinnertab(1)">未投保客户
                </div>
            </div>
            <div class="contentbox" v-show="innertabflag === 0">
                <div class="contenttopform">
                    <div class="formitrm">
                        <div class="lable">搜索：</div>
                        <div class="lablecontent"><el-input placeholder="请输入" v-model="tabonecompanyname" clearable
                                @input="changetabonecompanyname"></el-input></div>
                    </div>
                </div>
                <el-table :data="tabonebacltabledate" @sort-change="sort_changeone" style="width: 100%" 
                    :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536',
                    }">
                    <el-table-column prop="companyName" label="客户名称" />
                    <el-table-column prop="businessPrincipal" label="商务负责人" />
                    <el-table-column prop="deptName" label="所属分组" />
                    <el-table-column prop="productOpenTime" sortable label="开通时间" />
                    <el-table-column prop="accountBalance" sortable label="账户余额">
                        <template #default="scope">
                            <div class="price">￥{{ scope.row.accountBalance }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <span style="margin-right:5px" class="pointer blue" @click="todetail(scope.row)">查看详情</span>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="tabonebacltotal" :currentPage="tabonebaclpagenum" :pageSize="tabonebaclpagesize"
                    @SizeChange="changetabonebaclpagesize" @CurrentChange="changetabonebaclpagenum"></pagination>
            </div>
            <div class="contentbox" v-show="innertabflag === 1">
                <div class="contenttopform">
                    <div class="formitrm">
                        <div class="lable">搜索：</div>
                        <div class="lablecontent"><el-input placeholder="请输入" v-model="tabtwocompanyname" clearable
                                @input="changetabtwocompanyname"></el-input></div>
                    </div>
                </div>
                <el-table :data="tabtwobacltabledate" @sort-change="sort_changetwo" style="width: 100%" 
                    :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536',
                    }">
                    <el-table-column prop="companyName" label="客户名称" />
                    <el-table-column prop="businessPrincipal" label="商务负责人" />
                    <el-table-column prop="productOpenTime" sortable label="开通时间" />
                    <el-table-column prop="accountBalance" sortable label="账户余额">
                        <template #default="scope">
                            <div class="price">￥{{ scope.row.accountBalance }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <span style="margin-right:5px" class="pointer blue" @click="todetail(scope.row)">查看详情</span>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="tabtwobacltotal" :currentPage="tabtwobaclpagenum" :pageSize="tabtwobaclpagesize"
                    @SizeChange="changetabtwobaclpagesize" @CurrentChange="changetabtwobaclpagenum"></pagination>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import crumbs from '../../../components/crumbs.vue'
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getremindinsurecustomerapi, getreminduninsurecustomerapi } from '../../../api/microAlerts'
import { shake } from '../../../utils/utils'
const router = useRouter()
const route = useRoute()
const sort_changeone = (val: any) => {
    sortfileone.value = val.prop
    sorttypeone.value = val.order
    getremindinsurecustomer()
}
const sort_changetwo = (val: any) => {
    console.log(val)
    sortfiletwo.value = val.prop
    sorttypetwo.value = val.order
    getreminduninsurecustomer()
}
const sortfileone = ref('')
const sorttypeone = ref('')
const sortfiletwo = ref('')
const sorttypetwo = ref('')
const todetail =(val:any)=>{
    // const map = {
    //     0: 'detailSaasPay',
    //     3: 'detailPeriodInsure',
    //     2: 'detailWeInsure',
    //     6: 'detailGroupInsure',
    //     1: 'detailEleSign'
    // }
    router.push({
        path: 'detailWeInsure',
        query: {
            id: btoa(val.dealId),
            companyId: btoa(val.companyId)
        }
    })
}
const getremindinsurecustomer = () => {
    getremindinsurecustomerapi({
        pageNum: tabonebaclpagenum.value,
        searchText: tabonecompanyname.value,
        pageSize: tabonebaclpagesize.value,
        productType: 2,
        sortField: sortfileone.value === null ? '' : sortfileone.value.replace('ending', ''),
        sortType: sorttypeone.value === null ? '' : sorttypeone.value.replace('ending', '')
    }).then((res: any) => {
        console.log(res, 'ok')
        tabonebacltotal.value = res.totalCount
        tabonebacltabledate.value = res.list
    })
}
const getreminduninsurecustomer = () => {
    getreminduninsurecustomerapi({
        pageNum: tabtwobaclpagenum.value,
        searchText: tabtwocompanyname.value,
        pageSize: tabtwobaclpagesize.value,
        productType: 2,
        sortField: sortfiletwo.value === null ? '' : sortfiletwo.value.replace('ending', ''),
        sortType: sorttypetwo.value === null ? '' : sorttypetwo.value.replace('ending', '')
    }).then((res: any) => {
        console.log(res, 'no')
        tabtwobacltotal.value = res.totalCount
        tabtwobacltabledate.value = res.list
    })
}
// onMounted(() => {
//     getremindinsurecustomer()
// })
onActivated(() => {
    getremindinsurecustomer()
})
const back = () => {
    window.history.back()
}
const tabtwocompanyname = ref('')
const tabonecompanyname = ref('')
const changetabtwocompanyname = (val: any) => {
    shake(getreminduninsurecustomer, 400)
}
const changetabonecompanyname = (val: any) => {
    shake(getremindinsurecustomer, 400)
}
const tabonebacltabledate = ref<any>([])
const tabonebacltotal = ref(0)
const tabonebaclpagesize = ref(10)
const tabonebaclpagenum = ref(1)
const changetabonebaclpagesize = (val: any) => {
    tabonebaclpagesize.value = val
    tabonebaclpagenum.value = 1
    getremindinsurecustomer()
}
const changetabonebaclpagenum = (val: any) => {
    tabonebaclpagenum.value = val
    getremindinsurecustomer()
}
const tabtwobacltabledate = ref<any>([])
const tabtwobacltotal = ref(0)
const tabtwobaclpagesize = ref(10)
const tabtwobaclpagenum = ref(1)
const changetabtwobaclpagesize = (val: any) => {
    tabtwobaclpagesize.value = val
    tabtwobaclpagenum.value = 1
    getreminduninsurecustomer()
}
const changetabtwobaclpagenum = (val: any) => {
    tabtwobaclpagenum.value = val
    getreminduninsurecustomer()
}
const innertabflag = ref(0)
const changeinnertab = (i: number) => {
    innertabflag.value = i
    if (i === 0) {
        getremindinsurecustomer()
    } else if (i === 1) {
        getreminduninsurecustomer()
    }
}
</script>
<style lang="scss" scoped>
.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;

    .contentbox {
        padding: 16px;
        background-color: #ffffff;
        width: 100%;
        box-sizing: border-box;
        min-height: 300px;
        display: block;

        .contenttopform {
            margin-bottom: 31px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .formitrm {
                display: flex;
                align-items: center;

                .lable {
                    font-size: 14px;
                    margin-right: 8px;
                }
            }
        }
    }
}

.innertabactive {
    color: #0256FF !important;
    font-weight: 700;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.innertabbox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .innertabitem {
        cursor: pointer;
        min-width: 100px;
        height: 41px;
        text-align: center;
        line-height: 41px;
        color: #A7AAB2;
        font-size: 14px;
        background-color: #EFEEF1;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        border-top: 1px solid #e3e0e8;
        border-right: 1px solid #e3e0e8;
    }
}

.blue {
    color: #0256FF;
}

.price {
    color: #FF7642;
}
</style>